<template>
  <div class="borrowbook_container">
    <div class="header">
      <p>查看图书是否逾期</p>
    </div>
    <div class="banner">
      <div class="book_number">
        <el-input placeholder="请输入图书编号" v-model="bookNumber" class="input-style">
          <el-button slot="prepend" icon="el-icon-collection" class="input-icon"></el-button>
        </el-input>
      </div>
      <div class="query_button">
        <el-button type="primary" size="large" @click="goExpire" class="query-btn">
          查询
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookNumber: "",
    };
  },
  methods: {
    async goExpire() {
      // 发送axios请求，携带图书编号  如果返回状态码为成功 跳转逾期的页面 否则提示未借出图书
      const { data: res } = await this.$http.get(
          "bookadmin/query_book/" + this.bookNumber
      );
      if (res.status !== 200) {
        return this.$message.error(
            {
              message: res.msg,
              duration: 1000
            }
        );
      }
      // this.$message.success(res.msg);
      this.$router.push({
        name: "bookexpire",
        query: {
          bookNumber: this.bookNumber
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.borrowbook_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 85vh;
  background: linear-gradient(135deg, #6c5ce7, #00b894);

  .header {
    width: 100%;
    height: 80px;
    margin-bottom: 30px;
    p {
      color: #fff;
      font-size: 36px;
      font-weight: bold;
      text-align: center;
      line-height: 80px;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    }
  }

  .banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    padding: 30px;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;

    .book_number {
      width: 100%;
      margin-bottom: 20px;
      .input-style {
        border-radius: 8px;
        padding: 8px 15px;
        width: 100%;
        font-size: 16px;
      }
      .input-icon {
        border-radius: 8px;
      }
    }

    .query_button {
      margin-top: 20px;
      .query-btn {
        background: #00b894;
        color: #fff;
        font-size: 18px;
        padding: 12px 30px;
        border-radius: 25px;
        transition: background-color 0.3s;
        &:hover {
          background-color: #00a57e;
        }
      }
    }
  }
}
</style>
